<template>
  <div class="dc-container dc-main" v-loading="loading">
    <edit-form ref="editForm" :permission="permission" @save-finished="getList" @before-load="setLoad" @after-load="resetLoad"></edit-form>
    <el-container direction="horizontal">
      <el-main>
        <el-row :gutter="0" justify="end" align="top">
          <el-button type="primary" icon="Plus" @click="onCreate" v-show="permission.add">添加</el-button>
        </el-row>
        <vxe-table ref="tableRef" :id="'tableRef_' + $route.meta.routerId"
          :data="tableData" @sort-change="onSortChange">
          <vxe-column field="configFlag" title="是否完成第一次配置" resizable width="160px" align="center" header-align="center" sortable show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.configFlag === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="minLength" title="最小长度" resizable width="120px" align="center" header-align="center" sortable show-overflow></vxe-column>
          <vxe-column field="includeLetter" title="是否包含字母" resizable width="140px" align="center" header-align="center" show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.includeLetter === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="includeNumeral" title="是否包含数字" resizable width="140px" align="center" header-align="center" show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.includeNumeral === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="includeSpecial" title="是否包含特殊字符" resizable width="160px" align="center" header-align="center" show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.includeSpecial === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="changeFirst" title="首次登录更换密码" resizable width="160px" align="center" header-align="center" show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.changeFirst === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="tryCount" title="登录失败次数后锁定" resizable width="180px" align="center" header-align="center" sortable show-overflow></vxe-column>
          <vxe-column field="unlockTime" title="自动解锁分钟" resizable width="140px" align="center" header-align="center" sortable show-overflow></vxe-column>
          <vxe-column field="allowLast" title="密码可以与之前的相同" resizable width="180px" align="center" header-align="center" show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.allowLast === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="expire" title="密码过期月数" resizable width="140px" align="center" header-align="center" sortable show-overflow></vxe-column>
          <vxe-column field="warnDay" title="密码更新提醒天数" resizable width="160px" align="center" header-align="center" sortable show-overflow></vxe-column>
          <vxe-column field="watermark" title="安全水印" resizable width="120px" align="center" header-align="center" show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.watermark === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="cryptoFlag" title="传输加密" resizable width="120px" align="center" header-align="center" show-overflow>
            <template #default="scope">
              <el-tag v-if="scope.row.cryptoFlag === '1'" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </vxe-column>
          <vxe-column field="cryptoIv" title="加密IV" resizable width="160px" align="center" header-align="center" show-overflow></vxe-column>
          <vxe-column field="updateDate" title="更新时间" resizable width="160px" align="right" header-align="center" sortable show-overflow></vxe-column>
          <vxe-column title="操作" resizable width="160px" fixed="right" align="left" header-align="center">
            <template #header>
              <span>操作</span>
              <OperationIcon @click="onExport" type="primary" content="导出excel文件" icon-name="Download"></OperationIcon>
              <OperationIcon @click="onSetting('tableRef')" type="primary" content="自定义列" icon-name="Setting"></OperationIcon>
            </template>
            <template #default="scope">
              <OperationIcon @click="onView(scope)" type="info" v-show="permission.view" content="查看" icon-name="View"></OperationIcon>
              <OperationIcon @click="onEdit(scope)" type="primary" v-show="permission.edit" content="编辑" icon-name="Edit"></OperationIcon>
              <OperationIcon @click="onCopy(scope)" type="primary" v-show="permission.add" content="复制" icon-name="DocumentCopy"></OperationIcon>
              <OperationIcon @click="onDelete(scope)" type="danger" v-show="permission.remove" content="删除" icon-name="Delete"></OperationIcon>
            </template>
          </vxe-column>
        </vxe-table>
        <el-pagination :total="tableDataTotal" :page-size="search.limit" :current-page="tableDataPage" :page-sizes="[10, 20, 30, 40, 50, 100]"
          @size-change="onSizeChange" @current-change="onCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          style="display: flex; justify-content: flex-end; margin-top: 10px;"></el-pagination>
      </el-main>
    </el-container>        
  </div>
</template>
<script>
import { validatenull } from '@/utils/validate'
import { listSecurityPage, deleteSecurity } from '@/api/sys/security'
import { listResourcePermission } from '@/api/admin/common/permission'
import EditForm from './form'
import QueryTag from '@/views/components/queryTag'
import ConditionPanel from '@/views/components/conditionPanel'
import meta from './meta'
import MainUI from '@/views/components/mainUI'
import OperationIcon from '@/components/OperationIcon'

export default {
  extends: MainUI,
  components: { EditForm, QueryTag, ConditionPanel, OperationIcon },
  data() {
    return {
      permission: { view: false, add: false, edit: false, remove: false, export: false },
      meta,
      search: {
        params: [],
        columnName: '',
        order: '',
        offset: 0,
        limit: 10
      },

      tableData: [],
      tableDataPage: 1,
      tableDataTotal: 0,

      tableId: 'sys_security',
    }
  },
  computed: {},
  methods: {
    // 必须实现的方法 - 获取列表数据
    getList() {
      this.setLoad()
      /* 查询参数 和数据权限 */
      this.search.params = []
      // 数据权限: 安全配置表 sys_security
      this.pushDataPermissions(this.search.params, this.$route.meta.routerId, this.tableId)
      listSecurityPage(this.search)
        .then((responseData) => {
          if (responseData.code == 100) {
            this.tableDataTotal = responseData.data.total
            this.tableData = responseData.data.rows ? responseData.data.rows : []
          } else {
            this.showMessage(responseData)
          }
          this.resetLoad()
        })
        .catch((error) => {
          this.outputError(error)
        })
    },
    // 必须实现的方法 - 搜索
    onSearch() {
      this.search.offset = 0
      this.tableDataPage = 1
      this.getList()
    },
    // 必须实现的方法
    onSizeChange(val) {
      this.tableDataPage = 1
      this.search.limit = val
      this.search.offset = (this.tableDataPage - 1) * val
      this.getList()
    },
    // 必须实现的方法
    onCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.tableDataPage = val
      this.getList()
    },
    // 必须实现的方法 - 初始化
    async pageInit() {
      this.setLoad()
      try {
        this.search.params = []
        // 数据权限: 安全配置表 sys_security
        this.pushDataPermissions(this.search.params, this.$route.meta.routerId, this.tableId)
        let [securityRespData, permissionRespData] = await Promise.all([
          listSecurityPage(this.search),
          listResourcePermission(this.$route.meta.routerId)
        ])
        if (securityRespData.code == 100 && permissionRespData.code == 100) {
          this.tableDataTotal = securityRespData.data.total
          this.tableData = securityRespData.data.rows ? securityRespData.data.rows : []
          
          this.permission.view = permissionRespData.data.find((item) => {
            return item.permission === 'security:read'
          })
          this.permission.export = permissionRespData.data.find((item) => {
            return item.permission === 'security:export'
          })

          this.permission.add = permissionRespData.data.find((item) => {
            return item.permission === 'security:create'
          })
          this.permission.edit = permissionRespData.data.find((item) => {
            return item.permission === 'security:update'
          })
          this.permission.remove = permissionRespData.data.find((item) => {
            return item.permission === 'security:delete'
          })
        } else {
          this.showMessage(permissionRespData.code != 100 ? permissionRespData : securityRespData)
        }
        this.resetLoad()
      } catch (error) {
        this.outputError(error)
      }
    },
    // 必须实现的方法 - 打开查看模式
    onView(scope) {
      this.$refs.editForm.openView(scope.row.id)
    },
    // 必须实现的方法 - 打开新增模式 
    onCreate() {
      this.$refs.editForm.openAdd()
    },
    // 必须实现的方法 - 打开编辑模式
    onEdit(scope) {
      this.$refs.editForm.openEdit(scope.row.id)
    },
    // 必须实现的方法 - 打开复制模式
    onCopy(scope) {
      this.$refs.editForm.openCopy(scope.row.id)
    },
    // 必须实现的方法 - 删除记录
    onDelete(scope) {
      this.$confirm('确定删除吗？', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.setLoad()
          deleteSecurity(scope.row)
            .then((responseData) => {
              if (responseData.code == 100) {
                this.getList()
                this.showMessage({
                  type: 'success',
                  msg: '删除成功'
                })
              } else {
                this.showMessage(responseData)
              }
              this.resetLoad()
            })
            .catch((error) => {
              this.outputError(error)
            })
        })
        .catch(() => {})
    },
    // 必须实现的方法 - 设置
    onSetting(tableRef) {
      this.$refs[tableRef].triggerCustomEvent(event)
    },
    // 必须实现的方法 - 导出
    onExport() {
      this.$refs.tableRef.exportData()
    },
    // 必须实现的方法 - 排序
    onSortChange(orderby) {
      if (validatenull(orderby.prop)) {
        this.search.columnName = ''
        this.search.order = ''
      } else {
        this.search.columnName = orderby.prop
        this.search.order = orderby.order
      }
      this.getList()
    }
  },
  watch: {},
  mounted() {
    this.pageInit()
  }
}
</script> 